<template>
  <div class="home">
    <div class="container" ref="containerRef"></div>
    <div class="content">
      <div class="content-titile">
        <h1>汽车的原配与展示</h1>
      </div>
      <h2>选择车身颜色</h2>
      <div class="select">
        <div class="select-item" v-for="(item,index) in colors" :key="index" @click="selectColor(item)">
          <div class="select-item-color" :style="{background:item}"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import * as THREE from "three";
import { ref, onMounted } from "vue";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"; //读懂GLTF模式的模型
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
const renderer = new THREE.WebGLRenderer({ antialias: true });

renderer.setSize(window.innerWidth, window.innerHeight);

const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

camera.position.set(0, 2, 6);
const scene = new THREE.Scene();
const containerRef = ref("null");
let controls = null;
const wheels = [];
let carbody,
    frontcar,
    hotcar,
    grasscar;
// const geometry = new THREE.BoxGeometry(1, 1, 1);
// const material = new THREE.MeshBasicMaterial({ color: "pink" });
// const cube = new THREE.Mesh(geometry, material);
// scene.add(cube);

const render = () => {
  renderer.render(scene, camera);
  requestAnimationFrame(render);
};

onMounted(() => {
  containerRef.value.appendChild(renderer.domElement);
  renderer.setClearColor("#000");
  scene.background = new THREE.Color("#ccc");
  scene.environment = new THREE.Color("#ccc");
  render();

  controls = new OrbitControls(camera, renderer.domElement);
  controls.update(); //通知更新

  const gridHelper = new THREE.GridHelper(10, 10); //网格辅助线，数字越小，网格越密
  gridHelper.material.opacity = 0.2;
  gridHelper.material.transparent = true;
  scene.add(gridHelper);

  // 加载汽车模型
  const loader = new GLTFLoader();
  const dracoLoader = new DRACOLoader();
  dracoLoader.setDecoderPath("./draco/gltf/");
  loader.setDRACOLoader(dracoLoader);

  // 灯光
  // 灯光
  const light1 = new THREE.DirectionalLight(0xffffff, 1);
  light1.position.set(0, 0, 10);
  scene.add(light1);
  const light2 = new THREE.DirectionalLight(0xffffff, 1);
  light2.position.set(0, 0, -10);
  scene.add(light2);
  const light3 = new THREE.DirectionalLight(0xffffff, 1);
  light3.position.set(10, 0, 0);
  scene.add(light3);
  const light4 = new THREE.DirectionalLight(0xffffff, 1);
  light4.position.set(-10, 0, 0);
  scene.add(light4);
  const light5 = new THREE.DirectionalLight(0xffffff, 1);
  light5.position.set(0, 10, 0);
  scene.add(light5);
  const light6 = new THREE.DirectionalLight(0xffffff, 1);
  light6.position.set(5, 10, 0);
  scene.add(light6);
  const light7 = new THREE.DirectionalLight(0xffffff, 1);
  light7.position.set(0, 10, 5);
  scene.add(light7);
  const light8 = new THREE.DirectionalLight(0xffffff, 1);
  light8.position.set(0, 10, -5);
  scene.add(light8);
  const light9 = new THREE.DirectionalLight(0xffffff, 1);
  light9.position.set(-5, 10, 0);
  scene.add(light9);

  loader.load("./model/bmw01.glb", (gltf) => {
    //加载成功会有一个回调
    const bmw = gltf.scene;
    // console.log(gltf);
    bmw.traverse((child) => {
      //遍历
      //每个面
      // if (child.isMesh) {
      //   console.log(child);
      // }

      // 轮毂
      if (child.isMesh && child.name.includes("轮毂")) {
        child.material = wheelsMaterial;
        wheels.push(child);
      }
      // 车身
      if (child.isMesh && child.name.includes("Mesh002")) {
        carbody = child;
        carbody.material = bodyMaterial;
      }
      // 前脸
      if (child.isMesh && child.name.includes("前脸")) {
        frontcar = child;
        frontcar.material = frontMaterial;
      }
      // 引擎盖
      if (child.isMesh && child.name.includes("引擎盖_1")) {
        hotcar = child;
        hotcar.material = hotMaterial;
      }
      // 挡风玻璃
      if (child.isMesh && child.name.includes("挡风玻璃")) {
        grasscar = child;
        grasscar.material = grassMaterial;
      }
    });

    scene.add(bmw);
  });
});

// 创建车股材质
const wheelsMaterial = new THREE.MeshPhysicalMaterial({
  color: 0xff6799,
  metalness: 1,
  roughness: 0.5,
});
// 创建车身材质
const bodyMaterial = new THREE.MeshPhysicalMaterial({
  color: 0xff6799,
  metalness: 1,
  roughness: 0.5,
  clearcoat: 1,
  clearcoatRoughness: 0,
});
// 创建前脸材质
const frontMaterial = new THREE.MeshPhysicalMaterial({
  color: 0xff6799,
  metalness: 1,
  roughness: 0.5,
  clearcoat: 1,
  clearcoatRoughness: 0,
});
// 创建前脸材质
const hotMaterial = new THREE.MeshPhysicalMaterial({
  color: 0xff6799,
  metalness: 1,
  roughness: 0.5,
  clearcoat: 1,
  clearcoatRoughness: 0,
});
// 创建挡风玻璃材质
const grassMaterial = new THREE.MeshPhysicalMaterial({
  color: 0xffffff,
  metalness: 0,
  roughness: 0,
  transmission: 1,
  transparent:true
});
// 可添加磨砂材质

let colors=['red', 'green', 'blue', 'pink','orange', 'purple','yellow','olive']
const selectColor=(color)=>{
  console.log(color);
  wheelsMaterial.color.set(color)
  bodyMaterial.color.set(color)
  frontMaterial.color.set(color)
  hotMaterial.color.set(color)
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
.content {
  position: fixed;
  top: 0;
  right: 20px;
}
.select {
  display: flex;
}
.select-item {
  margin: 10px;
  cursor: pointer;
}
.select-item-color {
  width: 50px;
  height: 50px;
  border: 1px solid #ccc;
  border-radius: 10px;
}
</style>
